---
title: Box Reveal Animation
date: 2024-05-23
description: Sliding box animation that reveals text behind it.
author: tomonarifeehan
published: true
---

<ComponentPreview name="box-reveal-demo" />

<Steps>

### Installation

Copy and paste the following code into your project.

```text
components/magicui/box-reveal.tsx
```

<ComponentSource name="box-reveal" />

</Steps>

## Props

| Prop      | Type   | Description                                   | Default |
| --------- | ------ | --------------------------------------------- | ------- |
| className | string | The class name to be applied to the component |         |
| boxColor  | string | Color of the box overlaying the text          | #5046e6 |
| duration  | number | Durations (seconds) of the animation          | 0.5     |
